<template>
    <div class="loginAndOffer-wrap">
      <dheader></dheader>
      <!-- 新增报价表单 -->
      <div class="banner">
        <div class="ft-modal">
          <div class="ft-modal-wrap ft-modal-unlogin">
            <div class="ft-modal-context">
              <form class="layui-form" action="">
                <div class="layui-form-item">
                  <label class="layui-form-label">投保城市</label>
                  <div class="layui-input-block">
                    <select name="city" lay-filter="city" v-model="params.city" v-if="options.length">
                      <option v-for="(item, index) in options" :value="item.value" :key="`city_${index}`">{{item.label}}</option>
                    </select>
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">车牌号</label>
                  <div class="layui-input-block">
                    <div class="layui-input-inline inline-xss">
                      <select name="plate" lay-filter="plate" v-model="plate" v-if="options.length">
                        <option v-for="(item, index) in options" :value="`${item.platePrefix}`" :key="`plate_${index}`">{{item.platePrefix}}</option>
                      </select>
                    </div>
                    <div class="layui-input-inline inline-sm">
                      <input type="text" name="plateText" v-model="plateText" lay-verify="plateText" placeholder="请输入车牌号码" autocomplete="off" class="layui-input">
                    </div>
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">车主姓名</label>
                  <div class="layui-input-block">
                    <input type="text" name="name" v-model="params.name" lay-verify="required" placeholder="请输入车主姓名" autocomplete="off" class="layui-input">
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">车辆类型</label>
                  <div class="layui-input-block">
                    <div class="layui-input-inline inline-xs">
                      <input type="radio" name="carTypeCode" value="02" title="小型" checked="checked">
                      <input type="radio" name="carTypeCode" value="01" title="大型">
                    </div>
                    <div class="layui-input-inline inline-auto vmiddle">
                      <i class="layui-anim layui-icon layui-icon-tips" id="hoverTip">
                        <div class="hoverTips">
                          <img src="/static/dhbaoxian/images/tips.png">
                        </div>
                      </i>
                    </div>
                  </div>
                </div>
                <div v-if="!isLogined" class="layui-form-item">
                  <label class="layui-form-label">手机号码</label>
                  <div class="layui-input-block">
                    <input type="text" id="telNum" name="username" lay-verify="required" maxlength="11" v-model="params.phoneNo" placeholder="请输入手机号码" autocomplete="off" class="layui-input">
                    <div class="code-btn"><button type="button" id="reqs_code" class="layui-btn-dh layui-btn-xs">获取验证码</button></div>
                  </div>
                </div>
                <div v-if="!isLogined" class="layui-form-item">
                  <label class="layui-form-label">验证码</label>
                  <div class="layui-input-block">
                    <input type="text" name="username" lay-verify="required" v-model="params.checkCode" placeholder="请输入验证码" autocomplete="off" class="layui-input">
                  </div>
                </div>
                <div class="layui-form-item submit-btn">
                  <button lay-submit="" lay-filter="login" class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal">立即报价</button>
                </div>
              </form>
            </div>
          </div>
        </div>
        <!-- 新增报价表单 End -->
      </div>
    </div>
</template>

<script type="text/ecmascript-6">
  import {getCityList, getCheckCode, smsLogin} from '../mock/mock';
  import mockHandler from '../mock/handler';
  import FuncTools from '../utils/functionTools';
  import dheader from './header';
  export default {
    name: 'loginAndOffer',
    data () {
      return {
        COUNT_TIME: 10,
        options: {},
        plate: '苏D',
        plateText: '',
        params: {
          city: '320400',
          cityName: '常州',
          plateNo: '',
          phoneNo: '',
          phone: '',
          checkCode: '',
          name: '',
          carTypeCode: '02'
        },
        isLogined: FuncTools.getSession('identity')
      };
    },
    mounted () {
      this.initOptions().then(() => {
        const layui = window.layui;
        const that = this;
        layui.use(['form', 'layer'], function () {
          const form = layui.form;
          const $ = layui.jquery;
          const layer = layui.layer;
          // 发送验证码
          let TEL_RULE = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
          $('#reqs_code').on('click', function () {
            if (!$('#telNum').val().trim()) {
              return layer.alert('请输入手机号码');
            } else if (!TEL_RULE.test($('#telNum').val())) {
              return layer.alert('手机号码不正确');
            } else {
              this.countVal = that.COUNT_TIME;
              if (!$(this).hasClass('layui-btn-disabled')) {
                $(this).addClass('layui-btn-disabled');
                $(this).text(this.countVal + 's');
                this.countInvertal = setInterval(function () {
                  this.countVal -= 1;
                  if (this.countVal <= 0) {
                    clearInterval(this.countInvertal);
                    $(this).removeClass('layui-btn-disabled').text('获取验证码');
                    this.countVal = this.COUNT_TIME;
                  } else {
                    $(this).text(this.countVal + 's');
                  }
                }.bind(this), 1000);
                that.getCheck.bind(that)().then((r) => {
                  if (!r) {
                    if (!$(this).hasClass('layui-btn-disabled')) {
                      $(this).addClass('layui-btn-disabled');
                      $(this).text(this.countVal + 's');
                      this.countInvertal = setInterval(function () {
                        this.countVal -= 1;
                        if (this.countVal <= 0) {
                          clearInterval(this.countInvertal);
                          $(this).removeClass('layui-btn-disabled').text('获取验证码');
                          this.countVal = this.COUNT_TIME;
                        } else {
                          $(this).text(this.countVal + 's');
                        }
                      }.bind(this), 1000);
                    }
                  } else {
                    alert(r);
                  }
                });
              }
            }
          });

          form.on('select(city)', function (data) {
            that.params.city = data.value;
            that.params.cityName = $(data.elem).find('option:selected').text();
          });

          form.on('select(plate)', function (data) {
            that.plate = data.value;
          });

          form.on('radio', function (data) {
            that.params.carTypeCode = data.value;
          });

          form.verify({
            plateText: (val) => {
              if (val.length !== 5) {
                return '请输入5位车牌号';
              }
            }
          })

          // 提交表单
          form.on('submit(login)', function () {
            this.isLogined = FuncTools.getSession('identity');
            that.params.plateNo = that.plate + that.plateText;
            if (this.isLogined) {
              that.goNext();
            } else {
              that.params.phoneNo && (that.params.phone = that.params.phoneNo);
              if (that.params.phoneNo && that.params.checkCode) {
                that.login(that.params.phoneNo, that.params.checkCode, layer).then((loginR) => {
                  loginR && that.goNext(loginR);
                });
              }
            }
            return false;
          });
        });
      });
    },
    methods: {
      initOptions () {
        return mockHandler(getCityList, {structType: 2}).then((res) => {
          if (res.code === 'success') {
            this.options = res.data;
          }
        });
      },
      getCheck () {
        return mockHandler(getCheckCode, {phoneNo: this.params.phoneNo}).then((res) => {
          if (res.code === 'success') {
            return false;
          } else {
            return res.text;
          }
        });
      },
      login (phoneNo, smsCode, layer) {
        return mockHandler(smsLogin, {phoneNo, smsCode, deviceid: (Math.random() * 10000 + new Date().getTime() + '@web')}).then((res) => {
          if (res.code === 'success') {
            return res.data;
          } else {
            layer.alert(res.text);
            return !1;
          }
        });
      },
      goNext (loginR) {
        loginR && FuncTools.setSession('identity', {
          userId: loginR.id,
          verify: loginR.verify,
          deviceid: loginR.deviceid
        });
        FuncTools.setSession('param', this.params);
        this.$router.push({
          path: 'index'
        });
      }
    },
    components: {
      dheader
    }
  }
</script>

<style rel="stylesheet/stylus" lang="stylus">
.banner
  height 558px
  background-color #000
  .hoverTips
    position absolute
    top 80px
    right 100px
    z-index 9999
    display none

  #hoverTip:hover .hoverTips
    display block
    top -120px
    right 300px
</style>
